<!--
* @author wn
* @date 2024/03/15 11:37:03
* @description: 医院页
!-->
<template>
	<navbar
		title-text=""
		:isHeight="false"
		:isWhite="true"
		background="none"
		@navBarAttached="onNavBarAttached"
	/>
	<view style="position: relative">
		<image
			:src="hospital.avatar_url"
			mode="aspectFill"
			style="
				filter: blur(50rpx) brightness(0.8);
				display: block;
				width: 100%;
				height: 550rpx;
				overflow: hidden;
			"
		></image>
		<view
			:style="
				'position:absolute;top:' +
				navBarHeight +
				'rpx;padding-top:65rpx;overflow:hidden;width:100%;'
			"
		>
			<view class="hospital-hd">
				<view
					class="weui-cell weui-cell_access"
					hover-class="weui-cell_active"
					@tap="showShareModal"
				>
					<view class="weui-cell__hd">
						<image
							:src="hospital.avatar_url"
							mode="aspectFill"
							style="
								position: absolute;
								top: -65rpx;
								display: block;
								width: 150rpx;
								height: 135rpx;
								border-radius: 10rpx;
								overflow: hidden;
							"
						></image>
					</view>
					<view class="weui-cell__bd" style="padding-left: 170rpx">
						<view style="position: absolute; top: -65rpx">
							<text
								style="font-size: 36rpx; color: #ffffff; font-weight: bold"
								>{{ hospital.name }}</text
							>
						</view>
						<view>
							<text class="hosp-rank">{{ hospital.rank }}</text>
							<text class="hosp-label">{{ hospital.label }}</text>
						</view>
					</view>
					<view class="weui-cell__ft weui-cell__ft_in-access"
						><text class="f4">转发</text></view
					>
				</view>
				<view
					class="weui-cell weui-cell_access"
					hover-class="weui-cell_active"
					@tap="toMap"
				>
					<view class="weui-cell__hd">
						<image
							src="/static/images/ic_address.png"
							mode="aspectFill"
							style="
								margin-right: 10rpx;
								display: block;
								width: 40rpx;
								height: 40rpx;
							"
						></image>
					</view>
					<view class="weui-cell__bd">
						<view>
							<text style="font-size: 24rpx"
								>{{ hospital.city }}{{ hospital.district
								}}{{ hospital.address }}</text
							>
						</view>
					</view>
					<view class="weui-cell__ft weui-cell__ft_in-access"
						><text class="f4">导航</text></view
					>
				</view>
			</view>
			<view class="hospital-bd">
				<view class="weui-cells serv-list">
					<view class="weui-cell serv-item">
						<view class="weui-cell__bd">
							<view style="padding-top: 10rpx"
								><text class="serv-name">在线预约您需要的服务</text></view
							>
						</view>
						<view class="weui-cell__ft"></view>
					</view>
					<view
						class="weui-cell serv-item"
						@tap="toService"
						:data-svid="item.id"
						v-for="(item, index) in services"
						:key="index"
					>
						<block v-if="item.use_switch == 1">
							<view class="weui-cell__hd">
								<image
									class="serv-logo"
									:src="
										item.logo_image
											? item.logo_image_url
											: '../../resource/images/avatar.jpg'
									"
									mode="aspectFill"
								/>
							</view>

							<view class="weui-cell__bd">
								<view>
									<text class="serv-name">{{ item.name }}</text>
								</view>
								<view class="serv-line serv-intro">{{ item.intro }}</view>
								<view class="serv-line">
									<text class="serv-price">{{ item.price }}</text>
									<text class="serv-unit">元/次</text>
								</view>
							</view>
							<navigator
								class="weui-cell__ft"
								:url="`/pages/service/index?hid=${hospital.id}&svid=${item.id}`"
								hover-class="none"
							>
								<button class="btn1m">预约</button>
							</navigator>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
	<share :shareModal="clone_shareModal"></share>
</template>
<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import { getHospitalDetailApi } from '@/api/hospital'

const { hid } = defineProps({ hid: String })

// 绝对定位高度
const navBarHeight = ref(180)

onLoad(() => {
	// 获取定位
	uni.getLocation({
		type: 'wgs84',
		success({ longitude: lo, latitude: la }) {
			const { lons, lats } = mapLocation(lo, la)
			console.log(lons, lats)
			latitude = lats
			longitude = lons
		},
	})
	// 获取数据
	getHospitalDetailData()
})

// uni.getLocation 定位不准 矫正
const mapLocation = (longitude, latitude) => {
	const x_pi = (3.14159265358979324 * 3000.0) / 180.0
	const x = longitude - 0.0065
	const y = latitude - 0.006
	const z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_pi)
	const theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_pi)
	const lons = z * Math.cos(theta)
	const lats = z * Math.sin(theta)
	return { lons, lats }
}

// 医院详情
const hospital = ref({})
// 服务列表
const services = ref([])
// 获取医院详情
const getHospitalDetailData = async () => {
	const { hospital: h_data, services: s_data } = await getHospitalDetailApi(hid)
	hospital.value = h_data
	services.value = s_data
}

const clone_shareModal = ref(false)
// 点击转发 列
const showShareModal = () => (clone_shareModal.value = true)

// 导航 + 传入 终点的 经纬度
let latitude
let longitude
const toMap = () => {
	// let plugin = requirePlugin('routePlan')
	let key = 'HDLBZ-Q6XCQ-XXL5A-2PGNJ-7V7VK-SBFKN' // 使用在腾讯位置服务申请的key
	let referer = '陪诊出行' // 调用插件的app的名称
	let endPoint = JSON.stringify({
		// 终点
		name: hospital.value.name,
		latitude,
		longitude,
	})
	wx.navigateTo({
		url:
			'plugin://routePlan/index?key=' +
			key +
			'&referer=' +
			referer +
			'&endPoint=' +
			endPoint,
	})
}
</script>
<style lang="scss">
page {
	background: #f4f4f4;
}

.hospital-hd {
	margin: 20rpx 20rpx 0 20rpx;
	background: #ffffff;
	border-radius: 10rpx;
}
.hospital-hd .weui-cell {
	padding: 20rpx;
}

.hospital-bd {
	margin: 20rpx 20rpx 0 20rpx;
	background: #ffffff;
	border-radius: 10rpx;
}
.hospital-bd .weui-cells {
	margin-top: 0;
}
.hospital-bd .weui-cell {
	padding: 20rpx;
}

.hospital-ft {
	margin: 20rpx 20rpx 0 20rpx;
	background: #ffffff;
	border-radius: 10rpx;
}
.hospital-ft .weui-cell {
	padding: 20rpx;
}

.hosp-rank {
	font-size: 26rpx;
	font-weight: bold;
	color: #0bb585;
	margin-right: 15rpx;
}
.hosp-label {
	font-size: 26rpx;
	font-weight: bold;
	color: #0ca7ae;
	margin-right: 15rpx;
}

.serv-list {
	margin: 0;
	background: none;
}
.serv-list::before {
	display: none;
}
.serv-list::after {
	display: none;
}

.serv-item {
	padding: 20rpx;
	background: #ffffff;
	border-radius: 10rpx;
	overflow: hidden;
}
.serv-item::before {
	display: none;
}
.serv-item::after {
	display: none;
}
.serv-name {
	font-weight: bold;
	font-size: 34rpx;
}
.serv-logo {
	display: block;
	width: 150rpx;
	height: 150rpx;
	border-radius: 10rpx;
	overflow: hidden;
	margin-right: 20rpx;
}
.serv-line {
	margin-top: 8rpx;
}
.serv-line text {
	font-size: 26rpx;
}
.serv-rank {
	font-weight: bold;
	color: #0bb585;
	margin-right: 15rpx;
}
.serv-label {
	font-weight: bold;
	color: #0ca7ae;
	margin-right: 15rpx;
}
.serv-intro {
	font-size: 26rpx;
	color: #999999;
	width: 350rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.serv-price {
	font-size: 34rpx !important;
	font-weight: bold;
	color: #0bb684;
}
.serv-unit {
	color: #0bb684;
}
</style>
